markmap-lib

markmap-lib

Visualize your Markdown as mindmaps.

This project is heavily inspired by dundalek's markmap.

Try it out.

Node.js >= 10 is required.

Install

$ yarn add markmap-lib

d3 is also required if you are using dist/view.js with bundlers:

$ yarn add d3

See markmap-cli for command-line usage.

API

Transform

Transform Markdown to markmap data:

import { transform, getUsedAssets, getAssets } from 'markmap-lib/dist/transform';

// 1. transform markdown
const { root, features } = transform(markdown);

// 2. get assets
// either get assets required by used features
const { styles, scripts } = getUsedAssets(features);
// or get all possible assets that could be used later
const { styles, scripts } = getAssets();

Now we have the data for rendering.

Render

Render a markmap from transformed data:

Create an SVG element with explicit width and height:

<script src="https://cdn.jsdelivr.net/npm/d3@5"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-lib/dist/browser/view.min.js"></script>

<svg id="markmap" style="width: 800px; height: 800px"></svg>

Render a markmap to the SVG element:

// We got { root } data from transforming, and possible extraneous assets { styles, scripts }.

const { Markmap, loadCSS, loadJS } = window.markmap;

// 1. load assets
if (styles) loadCSS(styles);
if (scripts) loadJS(scripts, { getMarkmap: () => window.markmap });

// 2. create markmap

Markmap.create('#markmap', null, root);

// or pass an SVG element directly
const svgEl = document.querySelector('#markmap');
Markmap.create(svgEl, null, data);